<template>
	<view class="page">
		<hx-navbar title="教学经历" :fixed="true" bar-placeholder="hidden" transparent="auto"
			:background-color="[127, 74, 255,1]" color="#ffffff"
			:pageScroll.sync="scrollData"/>
			<view class="information-bg p-a" :style="{'height':statusBarHeight+63+'px'}"></view>
			<view class="" :style="{'height':statusBarHeight+16+'px','z-index':'-1'}">
				
			</view>
				<view class="content p-r" v-show="statusBarHeight!=''">
					<!-- 基础信息 -->
					<view class="experience">
						<view class="dis-flex flex-x-between flex-y-center b-b-ededed top">
							<view class="f_36 navy_blue f_semibold">教学经历</view>
							<view class="" @click="pageTo('/pages/teacher/add_experience/index')"><image  :src="imgPrefix('/static/image/teacher/experience_add_icon.png')" mode=""></image></view>
						</view>
						<view class="bottom f_28 gery1" v-if="experienceList.length<=0">
							请添加过往的教育经历
						</view>
						<view class="experience-list" v-else>
							<view v-for="(e_item,e_index) in experienceList" :key="e_index" class="item b-b-ededed" @click="pageTo('/pages/teacher/add_experience/index',{index:e_index})">
								<view class="f_32 navy_blue dis-flex flex-y-center title  f_semibold"><text>{{e_item.title}}</text><image :src="imgPrefix('/static/image/teacher/arrows.png')" mode=""></image></view>
								<view class="f_26 navy_blue time">
									<text>{{e_item.name}}</text>
									<text class="gery">{{e_item.startTime}}-{{e_item.endTime}}</text>
								</view>
								<view class="f_26 gery1 details">
									{{e_item.details}}
								</view>
							</view>
						</view>
					</view>
					<!-- 教学特色 -->
					<view class="feature">
						<view class="f_32 navy_blue title f_semibold">教学特色</view>
						<textarea v-model="feature" class="f_26" placeholder="请填写一些关于您这次课程的益处和帮助吧" placeholder-class="gery1 f_26" />
					</view>
					<!-- 教学标签最多可选3个 -->
					<view class="teaching-box b-b-ededed">
						<view class="title navy_blue f_28"><text class="f_36 navy_blue f_semibold">教学标签</text><text class="f_26 gery">最多可选3个</text></view>
						<view class=" dis-flex item-box">
							<view v-for="(list_item,list_index) in teachingList" :key="list_index" :class="list_item.status?'active f_semibold':'acquiescence'"
							class="item" @click="teachingWay(list_index)">
								<text class="f_28">{{list_item.tag_name}}</text>
								<image v-if="list_item.status" :src="imgPrefix('/static/image/teacher/check.png')" mode=""></image>
							</view>
						</view>
					</view>
					<!-- btn -->
					
					<fixed-bottom>
					<view class="btn-box">
						<view class="btn t-c" @tap="returnPage" :class="btnColor">确认</view>
					</view>
					</fixed-bottom>
				</view>
	</view>
</template>

<script>
	import { commonMixinFun } from '@/static/mixins/common.js'; //公共
	
import { statusBarHeight } from '@/static/mixins/statusBarHeight.js';
	import API from '@/static/api/index.js';
	export default {
		mixins: [commonMixinFun,statusBarHeight],
		onLoad(option) {
			if(option.hasOwnProperty('stype')){
				if(decodeURIComponent(option.stype)!='{}'){
					let obj = JSON.parse(decodeURIComponent(option.stype))
					this.feature = obj.trait;
					let arr = []
					obj.experience.forEach(e=>{
						arr.push({
							title:e.corporation,
							name:e.title,
							details	:e.content,
							startTime:e.starttime,
							endTime:e.endtime
						})
					})
					this.experienceList = arr;
					this.tagArr = obj.tag
				}
			}
			   //获取标签
			   this._getCourseTag()
		},
		data() {
			return {
				pageshow:false,
				statusBarHeight:'',
				scrollData:{},
				experienceList:[
					// {
					// 	title:'广州市某知名教育机构',
					// 	name:'数学老师',
					// 	startTime:'2020.06',
					// 	endTime:'2020.09',
					// 	details:'教学内容教学内容教学内容教学内容教学内容教学内教教学内容教学内容教学内容教学内容教学内容'
					// }
				],
				//教学特色
				feature:'',
				teachingList:[
					// {tag_name:'进阶',status:true},
					// {tag_name:'复习',status:false},
					// {tag_name:'考试',status:false},
					// {tag_name:'作文',status:false},
					// {tag_name:'论文',status:false},
				],//语言水平列表
				selectcount:0,//语言水平列表选中数量
				tagArr:[] // 已选的tagID数组回显时用到
			}
		},
		computed:{
			sendFrom:function(){
				let obj= {
					trait:this.feature//	教学特点/特色
				}
				let arr = [];
				this.teachingList.filter(o=>o.status==true).forEach(e=>{
					arr.push(e.tag_id)
				}),
				obj.tag = arr; // 标签id数组
				let experience = [];
				this.experienceList.forEach(e=>{
					experience.push({
						corporation:e.title,
						title:e.name,
						content	:e.details,
						starttime:e.startTime,
						endtime:e.endTime
					})
				})
				obj.experience = experience;
				this.$forceUpdate();
				return obj;
			},
			btnColor:function(){
				let {sendFrom}=this
				return (sendFrom.trait!=''&&sendFrom.experience.length>0)?'btn_active':'btn_default'
			}
		},
		methods:{
			returnPage(){
				uni.$emit("setObj",{type:4,objList: this.sendFrom});
				uni.navigateBack({})
			},
			//语言水平tag切换
			teachingWay (index){
				if(this.sendFrom.tag.length<3||!this.teachingList[index].status){
					this.teachingList[index].status=!this.teachingList[index].status
				}else{
					this.showToast('教学标签最多选择3个')
				}
			},
			//获取标签
			_getCourseTag(){
				API.getCourseTag().then(({code,data,msg})=>{
					if(code==1){
						let {tags}=data;
						let {tagArr}=this;
						for (let i = 0; i < tags.length; i++) {
							tags[i].status=tagArr.length==0?false:tagArr.findIndex(o=>o==tags[i].tag_id)!=-1;
						}
						// 
						this.teachingList=tags
					}else if(code==405){
						this.teachingList=[]
					}
				})
			},
		},
		onPageScroll(e) {
			this.scrollData = e
		}
	}
</script>

<style lang="scss" scoped>

.b-b-ededed{
	border-bottom: 1px solid #ededed;
}
.page{
	padding-bottom: 148rpx;
	.information-bg{
		background-image: linear-gradient(313deg, 
			#693ae6 0%, 
			#9564e6 100%);
			width: 100vw;
			z-index: 9;
	}
	.content{
		width: 654rpx;
		border-bottom: 16rpx solid #f4f4f4;	
		margin: 0 48rpx;
		z-index: 10;
		// 基础信息
		.experience{
			padding: 0  32rpx;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			background-color: #ffffff;
			.top{
				padding: 26rpx 0;
				image{
					width: 56rpx;
					height: 56rpx;
				}
			}
			.bottom{
				padding: 32rpx 0;
			}
			.experience-list{
				// padding-bottom: 50rpx;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				.title{
					padding:34rpx 0 10rpx 0;
				}
				.time{
					margin-bottom: 18rpx;
					text{
						margin-right: 16rpx;
					}
				}
				.details{				
					margin-bottom: 40rpx;
					max-height: 100rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}
		}	
		// 教学特色
		.feature{
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			margin: 16rpx 0;
			padding: 32rpx;
			.title{
				padding-bottom: 26rpx;
			}
			textarea{
				width: 100%;
				height: 248rpx;
				background-color: #fafafa;
				border-radius: 16rpx;
				padding: 16rpx;
			}
		}
		// 教学标签最多可选3个
		.teaching-box{
			// padding: 32rpx 32rpx 150rpx 32rpx;
			padding: 32rpx 0rpx 150rpx 0rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 40rpx 0rpx 
				rgba(0, 0, 0, 0.02);
			border-radius: 32rpx;
			.item-box{
				flex-wrap:wrap;
				padding: 0 22rpx;
			}
			.item{
				width: 30%;
				margin-bottom: 16rpx;
				// padding: 12rpx 0;
				line-height: 64rpx;
				text-align: center;
				margin: 0 1.6% 16rpx;
			}
			.active{
				background-color: rgba(127, 74, 255, 0.1);
				border-radius: 12rpx;
				border: solid 1rpx #9254ff;
				color: #9254ff;
				position: relative;
				image{
					position: absolute;
					right: 0;
					bottom: 0;
					width: 36rpx;
					height: 36rpx;
				}
			}
			.title{
				padding-bottom: 26rpx;
				padding: 0 32rpx 26rpx 32rpx;
			}
			.acquiescence{
				background-color: #ffffff;
				border-radius: 12rpx;
				border: solid 1rpx rgba(37, 39, 72, 0.3);
			}
		}
	
		.btn-box{
			background: white;
			width: 654rpx;
			.btn{
				line-height: 92rpx;
				border-radius: 16rpx;
			}
			.btn_active{
				background-image: linear-gradient(270deg, 
					#7f4aff 0%, 
					#9254ff 100%);
				color: white;
			}
			.btn_default{
				background-color: #f0f0f6;
				color: #d1d2db;
			}
		}
	}
}
.experience-list .item:last-of-type{
	border-bottom: 1px solid white;
}
</style>
